﻿// 引入 Qt Quick 的基础模块，提供核心 QML 类型（如 Rectangle、Text 等）
import QtQuick 2.12

// 引入 Qt Quick 的窗口模块，提供 Window 类型
import QtQuick.Window 2.12

// 引入 Qt Quick Controls 模块，提供 Button、CheckBox 等控件
import QtQuick.Controls 2.5

// 创建一个窗口对象（程序主界面）
Window {
    visible: true         // 设置窗口可见
    width: 800            // 设置窗口宽度为 800 像素
    height: 600           // 设置窗口高度为 600 像素
    title: qsTr("Qt Quick测试程序")  // 设置窗口标题，qsTr 用于国际化支持

    // 创建一个按钮控件
    Button {
        id: exitbutton                  // 设置 ID，便于引用
        text: "Exit Button"            // 按钮上显示的文字
        anchors.left: parent.left      // 锚定到父元素的左边
        anchors.leftMargin: 100        // 距离左边 100 像素
        anchors.bottom: parent.bottom  // 锚定到底部
        anchors.bottomMargin: 500      // 距离底部 500 像素

        onClicked: {
            Qt.quit(); // 点击时退出程序
        }
    }

    // 创建一个绿色矩形
    Rectangle {
        x: 100                // X 坐标位置
        y: 150                // Y 坐标位置
        width: 190            // 宽度
        height: 70            // 高度
        color: "#00B000"      // 颜色为绿色
        opacity: 1.2;         // 不透明度，注意：超过 1 是无效的（最大为 1）
    }

    // 创建一个复选框控件
    CheckBox {
        id: checkboxcontrol
        text: qsTr("湖南省长沙市") // 复选框显示的文本
        checked: true               // 默认选中
        x: 100                      // X 坐标
        y: 300                      // Y 坐标

        // 自定义复选框的图形（indicator）
        indicator: Rectangle {
            implicitWidth: 60
            implicitHeight: 60
            x: checkboxcontrol.leftPadding              // 自适应位置
            y: parent.height / 2 - height / 2           // 垂直居中
            radius: 3                                   // 圆角

            // 外框颜色根据是否按下按钮而变化
            border.color: checkboxcontrol.down ? "#18a81a" : "*888999"

            // 内部小矩形作为选中状态的指示
            Rectangle {
                width: 30
                height: 30
                x: 15
                y: 15
                radius: 3
                color: checkboxcontrol.down ? "#18a81a" : "*888999"
            }
        }

        // 自定义文本样式
        contentItem: Text {
            text: checkboxcontrol.text
            font.pixelSize: 30                              // 设置字体大小
            color: checkboxcontrol.down ? "#18a81a" : "*888999"
            verticalAlignment: Text.AlignVCenter            // 垂直居中
            leftPadding: checkboxcontrol.indicator.width + checkboxcontrol.spacing
        }
    }

    // 创建一个可变色动画矩形
    Rectangle {
        id: irect              // ID 用于状态控制
        x: 400
        y: 120
        width: 300
        height: 60
        state: "normal"        // 默认状态是 normal

        // 定义状态切换逻辑
        states: [
            State {
                name: "normal"
                PropertyChanges {
                    target: irect
                    color: "red"     // 正常状态为红色
                }
            },
            State {
                name: "lightblue"
                PropertyChanges {
                    target: irect
                    color: "lightblue"   // 状态切换时变成浅蓝色
                    width: 200
                    height: 60
                }
            }
        ]

        // 状态切换时的过渡动画
        transitions: [
            Transition {
                from: "normal"
                to: "lightblue"
                PropertyAnimation {
                    properties: "color,width,height"
                    duration: 3000       // 动画持续时间 3 秒
                }
            }
        ]
    }

    // 控制状态切换的按钮：变成 lightblue 状态
    Button {
        id: changesstatess
        x: 400
        y: 190
        text: "change state"
        onClicked: irect.state = "lightblue";
    }

    // 控制状态切换的按钮：恢复到 normal 状态
    Button {
        id: recoverss
        x: 570
        y: 190
        text: "recoverss state"
        onClicked: irect.state = "normal";
    }
}
